import platform = require('../../../common/baseCommon');
import appClient = require('../../appClient');
import platformControls = require('../../controls');
import mainForm = require('../navbarMainForm');
import report = require('../../../../platform/client/report');

let dialog: platformControls.dialog = new platformControls.dialog();
/**
 * 网页智能报表应用主视图
 */
@platform.addon("网页智能报表应用通用主视图", "网页智能报表应用通用主视图,用于PC端通用智能报表网页布局的主视图", "platform.client")
@appClient.template("platform/client/mainForm/navtabs/navtabsMainForm.html",
    "platform/client/mainForm/navtabs/navtabsMainForm.css")
export class navtabsMainForm extends mainForm.navbarMainForm {

    static skinCookieName = "skinName";

    /**
     * 网页标题
     */
    title?: string;

    /**
     * 网页Brand
     */
    $brandTitle?: JQuery = undefined;

    /**
     * 用户名
     */
    $username?: JQuery = undefined;

    /**
     * 菜单
     */
    $menu?: JQuery = undefined;

    /**
     * tab页面
     */
    $tabsBar?: JQuery = undefined;

    /**
     * 新建按钮
     */
    $newButton?: JQuery = undefined;

    /**
     * 全屏按钮
     */
    $fullScreen?: JQuery = undefined;

    /**
     * 标签信息
     */
    navPages?: platformControls.tabPanePage[];

    /**
     * 激活的标签
     */
    activeTab?: JQuery = undefined;

    /**
     * 上一个标签
     */
    previousTab?: JQuery = undefined;

    /**
     * 主题选择下拉菜单
     */
    $themeSelect?: JQuery = undefined;

    /**
     * 主题
     * (格式：{"主题名"："主题路径", ……})
     */
    themes?: any = {};

    /**
     * 下拉菜单按钮
     */
    $dropdownMenuButton?: JQuery = undefined;


    /**
     * 关闭标签页
     * @param page 即将关闭的标签页
     */
    closePage?(page: platformControls.tabPanePage) {
        let $tabContent: JQuery = $(this.$content).find('#' + page.id);
        if ($tabContent.length != 0) {
            //删除前解绑事件
            $tabContent.unbind();
            //删除页面
            $tabContent.remove();
        }
        let currentTab: JQuery = this.$tabsBar.find(page.element).find("a");
        //如果激活标签不是当前点击关闭按钮的标签，但当前点击关闭按钮的标签是前一个的标签，则将前一个标签置空
        if (this.activeTab.attr("name") != currentTab.attr("name") && this.previousTab && this.previousTab.attr("name") == currentTab.attr("name")) {
            this.previousTab = undefined;
        }
        //关闭的是当前标签且前一个标签不为空，则激活前一个标签
        if (this.activeTab.attr("name") == currentTab.attr("name") && this.previousTab && this.previousTab.length != 0) {
            $(this.previousTab).tab('show');
        } else if (this.activeTab.attr("name") == currentTab.attr("name") && (!this.previousTab || this.previousTab.length == 0)) {
            //关闭的是激活标签，且前一个标签为空时，则激活左边的标签，如果左边没有，则激活右边的，都没有则不激活
            let currentTabNum: number = $(page.element).index();
            let targetTabNum: number = currentTabNum - 1 >= 0 ? currentTabNum - 1 : currentTabNum + 1;
            if (targetTabNum < this.$tabsBar.children().length) {
                this.$tabsBar.children().eq(targetTabNum).find("a").tab('show');
            } else {
                this.activeTab = undefined;
                //没有激活标签，则清空当前标签页、当前视图栈、当前视图
                this.currentTabPage = undefined;
                this.currentViewStack = undefined;
                this.currentView = undefined;
            }
        }
        //跳转标签后将储存的前一个标签置空
        this.previousTab = undefined;
        //清空关闭标签页视图栈
        //page.viewStack.empty();
    }

    /**
     * 更改标签页
     * @param page 标签页
     */
    changePage?(page: platformControls.tabPanePage) {
        if (this.$tabsBar.find(page.element).length != 0) {
            $(this.$tabsBar.find(page.element).find("a")).tab('show');
        } else {
            // 构造标签页导航条
            page.appendTo(this.$tabsBar);
            // 构造标签页内容区域
            let tabPaneControl: platformControls.tabPaneControl = new platformControls.tabPaneControl();
            tabPaneControl.id = page.id;
            //tabPaneControl.addChild(page.id, view);
            tabPaneControl.appendTo(this.$content);

            let tab: JQuery = this.$tabsBar.find(page.element).find("a");
            $(tab).on('shown.bs.tab', (e) => {
                //切换标签时显示记录激活标签和前一个标签
                this.activeTab = $(e.target);
                this.previousTab = $(e.relatedTarget);

                this.switchPage(page);
            });
            $(tab).tab('show');
            if (tabPaneControl.onShowed) {
                tabPaneControl.onShowed();
            }
        }
    }

    /**
     * 切换标签页，当激活标签发生变更时触发
     * @param page 标签页
     */
    switchPage?(page: platformControls.tabPanePage) {
        // 标签页存在视图栈，即关联视图作为首页，则设置当前视图栈
        if (page.viewStack) {
            this.currentTabPage = page;
            this.currentViewStack = page.viewStack;
            let view: appClient.baseView;
            //视图栈不为空，直接打开栈顶视图
            if (this.currentViewStack.length() > 0) {
                view = this.currentViewStack.top();
                this.openView(view);
            } else {
                view = platform.getObject(page.view);
                if (page.title)
                    view.caption = page.title;
                this.navigate(view);
            }
        } else {
            // 标签页不存在视图栈，则直接导航到关联视图
            let view = platform.getObject(page.view);
            if (page.title)
                view.caption = page.title;
            this.navigate(view);
        }
    }

    /**
     * 打开视图
     * @param view 视图
     */
    protected openView?(view: appClient.baseView): void {
        this.currentView = view;
        this.$title.html(view.caption);

        let $tabContent: JQuery = $(this.$content).find('#' + this.currentTabPage.id);
        $tabContent.children().hide();
        if ($tabContent.find(view.element).length > 0) {
            $(view.element).show();
        } else {
            view.appendTo($tabContent);
        }
        if (view.onShowed) {
            view.onShowed();
        }
    }

    /**
     * 绑定事件
     */
    onAfterBind?() {
        var skin = appClient.cookie.getCookie(this.skinCookieName);
        if (skin != undefined && skin) {
            this.createThemesMenu(skin);
        } else {
            this.createThemesMenu();
        }
        this.$brandTitle.html(this.title);
        // 渲染菜单
        if (this.navPages) {
            for (let nav of this.navPages) {
                nav.onChangeView = (page: platformControls.tabPanePage) => {
                    this.changePage(page);
                };
                nav.onClickCloseButton = (page: platformControls.tabPanePage) => {
                    this.closePage(page);
                };
                nav.appendTo(this.$menu);
                //移除标签的删除按钮
                let closeButton: JQuery = $(nav.element).find("button")
                if (closeButton.length != 0) {
                    closeButton.remove();
                }
            }
        }

        let that = this;
        //取消菜单选中效果
        this.$dropdownMenuButton.on("hidden.bs.dropdown", () => {
            that.$menu.find('li').removeClass('active');
            that.$dropdownMenuButton.removeClass('active');
        });
        //点击新建按钮
        this.$newButton.click(() => {
            this.clickNewButton();
        });

        //加载首页
        if (this.navPages && this.navPages[0]) {
            this.changePage(this.navPages[0]);
        }
    }

    /**
     * 缩略图组控件
     */
    thumbnilGroupView: platformControls.carousel;
    /**
     * 点击新建按钮
     */
    clickNewButton?() {

    }

    /**
     * 创建智能报表
     * @param caption 标题
     * @param tempUrl 模板Url
     */
    createSmartReport(caption: string, tempUrl: string): report.smartReport {
        let smartReport = new report.smartReport();
        smartReport.caption = caption;
        smartReport.layoutPanel = new platformControls.layoutPanel(tempUrl);
        return smartReport;
    }

    /**
     * 创建主题菜单
     */
    createThemesMenu(skinName?: string) {
        let that = this;
        let index = 0;
        for (var key in this.themes) {
            if (key == platform.proto) break;
            if (this.themes.hasOwnProperty(key)) {
                var theme = $('<li><a href="#" data-theme="' + key + '">' + key + '</a></li>')
                theme.click(function (event) {
                    let skinName = $(event.target).attr('data-theme');
                    var themeurl = that.themes[skinName];
                    $('#theme').attr('href', themeurl);
                    that.$themeSelect.find('li').removeClass('active');
                    $(event.delegateTarget).addClass('active');
                    appClient.cookie.setCookie(that.skinCookieName, skinName, "d30");
                });
                theme.appendTo(this.$themeSelect);

                let themeurl: string = undefined;
                //有皮肤名则按传来的皮肤名
                if (skinName && skinName == key) {
                    themeurl = that.themes[skinName];
                } else if (index == 0) {
                    //选中第一个主题
                    themeurl = that.themes[0];
                }
                if (themeurl) {
                    $('#theme').attr('href', themeurl);
                    theme.addClass('active');
                }
                index++;
            }
        }
    }
}
